<template>
    <div class="class">
        <div class="content">
        <!-- 面包屑 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: 'Home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>分类参数</el-breadcrumb-item>
        </el-breadcrumb>
        <el-alert
        title="！注意只允许为第三级分类设置参数"
        type="warning">
        </el-alert>
    <span>请选择商品分类</span>
    <el-cascader :options="options" :show-all-levels="false" @change="handleChange" :props="{
        value: 'cat_id',
        label: 'cat_name',
        children: 'children'
        }"></el-cascader>
    <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="用户管理" name="second">
        <el-button type="primary" disabled>设置动态参数</el-button>
        <el-table
        ref="singleTable"
        :data="arr"
        highlight-current-row
        @current-change="handleCurrentChange"
        style="width: 100%">
        <el-table-column
        type="index"
        width="50">
        </el-table-column>
        <el-table-column
        property="attr_name"
        label="属性名称"
        width="120">
        </el-table-column>
        <el-table-column label="操作">
        <template slot-scope="scope">
            <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
        </el-table-column>
    </el-table>
        </el-tab-pane>
        <el-tab-pane label="配置管理" name="first">
        <el-button type="primary">设置动态参数</el-button>
        <el-table
        ref="singleTable"
        :data="tableData"
        highlight-current-row
        @current-change="hand"
        style="width: 100%">
        <el-table-column
        type="index"
        width="50">
        </el-table-column>
        <el-table-column
        property="attr_name"
        label="属性名称"
        width="120">
        </el-table-column>
        <el-table-column
        property="attr_vals"
        label="属性值"
        width="120">
        </el-table-column>
        <el-table-column label="操作">
        <template slot-scope="scope">
            <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
        </el-table-column>
    </el-table>
        
        </el-tab-pane>
    </el-tabs>
        </div>
    </div>
</template>

<script>
import {datalist,Parameterlist} from "../api/api.js"
export default {
  data() {
    return {
      options: [],
       tableData: [],
      activeName: 'second',
      value:"",
      num:"",
      arr:[]
    };
  },
  created() {
    this.datalist();
  },
   methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      },
      setCurrent(row) {
        this.$refs.singleTable.setCurrentRow(row);
      },
      handleCurrentChange(val) {
        this.currentRow = val;
      },
      hand(){
        console("111");
      },
      datalist(){
        datalist({
          type:3
        }).then(res=>{
           if(res.status==200){
            console.log("1111",res);
             this.options=res.data.data
           }
        })
      },
      handleChange(value){
        console.log(value);
        this.value = value.join(",");
      this.num = value.join(",").slice(4);
      console.log(this.num);
       this.a();
       this.b();
      },
      a() {
      Parameterlist({
        id: this.num,
        sel: "many"
      }).then(res => {
          if(res.data.meta.status==200){
            this.arr=res.data.data;
               console.log(this.arr);
          }
      });
    },
    b(){
      Parameterlist({
        id: this.num,
        sel: "only"
      }).then(res => {
          if(res.data.meta.status==200){
            console.log("2222",res);
              this.tableData=res.data.data;
               console.log(this.tableData);
            
          }
      });  
    },
  }
};
</script>

<style scoped lang="scss">
    .class{
        width:85%;
        height:93%;
        background-color:white;
        margin:22px auto;
        display:flex;
        justify-content: center;
        align-items:center;
        .content{
            width:97%;
            height:95%;
        }
    }
</style>
